<!-- 新增/修改弹框 -->
<template>
  <div v-loading="loading">
    <el-row
      style="border-left: 5px solid #3b98f7; margin-left: 50px; text-indent: 2em; line-height: 30px; font-weight: 600"
    >
      基本信息
    </el-row>
    <el-row>
      <el-col :span="4">
        <el-row justify="center" :gutter="20">
          <el-col :span="12" aligin="center" style="margin-left: 50px">
            <div style="width: 100%; height: 100%; background-color: rgb(231, 231, 233)">
              <el-image style="width: 100%; height: 100%" :src="detailInfo.person?.base64PhotoStr" fit="fill">
                <template #error>
                  <div style="width: 100%; height: 100%">
                    <icon-picture />
                  </div> </template
              ></el-image>
            </div>
          </el-col>
        </el-row>
        <el-row justify="center" :gutter="20">
          <el-col :span="12" align="center" style="margin-left: 50px">
            <el-text>采集照片</el-text>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="20" :offset="0">
        <el-row :gutter="20">
          <el-col :span="12" :offset="0" style="display: inline-flex; align-items: center">
            <span style="color: black">{{ detailInfo.person?.name }}</span>
            <el-tag style="margin-left: 15px">{{ detailInfo.member?.typeName }}</el-tag>
          </el-col>
        </el-row>

        <el-descriptions :column="4">
          <el-descriptions-item label="性别:">{{
            gender.find((i: any) => i.value == detailInfo.person?.gender)?.label
          }}</el-descriptions-item>
          <el-descriptions-item label="身份证号:">{{ detailInfo.person?.cardNumber }}</el-descriptions-item>
          <el-descriptions-item label="出生日期:">{{ detailInfo.person?.birthday }}</el-descriptions-item>
          <el-descriptions-item label="发证机关:">{{ detailInfo.person?.cardOrg }}</el-descriptions-item>
          <el-descriptions-item label="民族:">{{ detailInfo.person?.nation }}</el-descriptions-item>
          <el-descriptions-item label="证件有效期:">{{ detailInfo.person?.cardEnddate }}</el-descriptions-item>
          <el-descriptions-item label="家庭住址:">{{ detailInfo.person?.address }}</el-descriptions-item>
          <el-descriptions-item label="婚姻状况:">{{
            maritalStatus.find((i: any) => i.value == detailInfo.person?.maritalStatus)?.label
          }}</el-descriptions-item>
          <el-descriptions-item label="手机号码:">{{ detailInfo.person?.mobile }}</el-descriptions-item>
          <el-descriptions-item label="政治面貌:">{{
            politicsType.find((i: any) => i.value == detailInfo.person?.politicsType)?.label
          }}</el-descriptions-item>
          <el-descriptions-item label="紧急联系人:">{{ detailInfo.person?.urgentLinkman }}</el-descriptions-item>
          <el-descriptions-item label="紧急联系电话:">{{ detailInfo.person?.urgentLinkmanHone }}</el-descriptions-item>
          <el-descriptions-item label="加入工会日期:">{{ detailInfo.person?.joinedTime }}</el-descriptions-item>
          <el-descriptions-item label="特长:">{{ detailInfo.person?.specialty }}</el-descriptions-item>
          <el-descriptions-item label="文化程度:">{{
            cultureLevel.find((i: any) => i.value == detailInfo.person?.cultureLevel)?.label
          }}</el-descriptions-item>
          <el-descriptions-item label="是否有重大病史:">{{
            detailInfo.person?.HasBadMedicalHistory ? "是" : "否"
          }}</el-descriptions-item>
          <el-descriptions-item label="是否购买工伤或意外伤害保险:">{{
            detailInfo.person?.hasBuyInsurance ? "是" : "否"
          }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-row
      style="border-left: 5px solid #3b98f7; margin-left: 50px; text-indent: 2em; line-height: 30px; font-weight: 600"
    >
      班组信息
    </el-row>
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="15" :offset="0">
        <el-descriptions :column="3">
          <el-descriptions-item label="班组名称:">{{ detailInfo.member?.groupName }}</el-descriptions-item>

          <el-descriptions-item v-if="detailInfo.member?.isManager" label="岗位类型:">{{
            detailInfo.member?.postCategoryName
          }}</el-descriptions-item>
          <el-descriptions-item v-if="!detailInfo.member?.isManager" label="工种:">{{
            detailInfo.member?.typeName
          }}</el-descriptions-item>
          <el-descriptions-item v-if="!detailInfo.member?.isManager" label="是否为班组长:">{{
            detailInfo.member?.isLeader ? "是" : "否"
          }}</el-descriptions-item>
          <el-descriptions-item label="进场日期:">{{ detailInfo.member?.startDate }}</el-descriptions-item>
          <el-descriptions-item v-if="detailInfo.member?.status == 0" label="离场日期:">{{
            detailInfo.member?.endDate
          }}</el-descriptions-item>
          <el-descriptions-item label="工资卡开卡银行:">{{ detailInfo.bank?.bankName }}</el-descriptions-item>
          <el-descriptions-item label="工资卡卡号:">{{ detailInfo.bank?.cardNo }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-row
      style="border-left: 5px solid #3b98f7; margin-left: 50px; text-indent: 2em; line-height: 30px; font-weight: 600"
    >
      证书信息
    </el-row>
    <el-row :gutter="20" justify="center">
      <el-col :span="20">
        <el-tabs v-model="activeName">
          <el-tab-pane label="职业技能证书" :name="1">
            <skills-cert
              :table-data="skillsCertTableData"
              :option-type="optionType"
              @delete-row="handleDeleteRow"
            ></skills-cert>
          </el-tab-pane>
          <el-tab-pane label="执业注册证书" :name="5">
            <registration-cert
              :table-data="registrationCertTableData"
              :option-type="optionType"
              @delete-row="handleDeleteRow"
            ></registration-cert>
          </el-tab-pane>
          <el-tab-pane label="岗位证书" :name="3">
            <job-cert :table-data="jobCertTableData" :option-type="optionType" @delete-row="handleDeleteRow"></job-cert>
          </el-tab-pane>
          <el-tab-pane label="职称证书" :name="4">
            <title-cert
              :table-data="titleCertTableData"
              :option-type="optionType"
              @delete-row="handleDeleteRow"
            ></title-cert>
          </el-tab-pane>
          <el-tab-pane label="安装证书" :name="2">
            <installed-cert
              :table-data="installedCertTableData"
              :option-type="optionType"
              @delete-row="handleDeleteRow"
            ></installed-cert>
          </el-tab-pane>
          <el-tab-pane label="其他证书" :name="6">
            <other-cert
              :table-data="otherCertTableData"
              :option-type="optionType"
              @delete-row="handleDeleteRow"
            ></other-cert>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import skillsCert from "../../components/skillsCert.vue";
import registrationCert from "../../components/registrationCert.vue";
import jobCert from "../../components/jobCert.vue";
import titleCert from "../../components/titleCert.vue";
import installedCert from "../../components/installedCert.vue";
import otherCert from "../../components/otherCert.vue";
import { GetEmployeeForm } from "@/api/worker/index";
import { ElMessage } from "element-plus";
import { Picture as IconPicture } from "@element-plus/icons-vue";
import { getDicts } from "@/store/modules/dict";

const maritalStatus = getDicts("maritalStatus");
const politicsType = getDicts("politicsType");
const cultureLevel = getDicts("cultureLevel");
const chineseEthnicity = getDicts("chineseEthnicity");
const gender = getDicts("gender");

const activeName = ref(1);

//1：新增 2 修改 3 详情
const optionType = ref(3);
//声明变量
const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
});
const { id } = toRefs(props);

const emit = defineEmits(["sendClose"]);
const loading = ref(false);
const skillsCertTableData = ref<any[]>([]);
const registrationCertTableData = ref<any[]>([]);
const jobCertTableData = ref<any[]>([]);
const titleCertTableData = ref<any[]>([]);
const installedCertTableData = ref<any[]>([]);
const otherCertTableData = ref<any[]>([]);
const detailInfo = ref<any>({});
const handleDeleteRow = function (type: number, index: number) {
  if (type == 1) {
    skillsCertTableData.value.splice(index, 1);
  } else if (type == 5) {
    registrationCertTableData.value.splice(index, 1);
  } else if (type == 3) {
    jobCertTableData.value.splice(index, 1);
  } else if (type == 4) {
    titleCertTableData.value.splice(index, 1);
  } else if (type == 2) {
    installedCertTableData.value.splice(index, 1);
  } else if (type == 6) {
    otherCertTableData.value.splice(index, 1);
  }
};

const initForm = async function () {
  loading.value = true;
  let res = await GetEmployeeForm(id.value);
  loading.value = false;
  if (res.type === 0) {
    if (res.success) {
      detailInfo.value = res.data;
      if (res.data.certificates && res.data.certificates.length > 0) {
        skillsCertTableData.value = res.data.certificates.filter((item: any) => {
          return item.certificateType == 1;
        });
        registrationCertTableData.value = res.data.certificates.filter((item: any) => {
          return item.certificateType == 5;
        });
        jobCertTableData.value = res.data.certificates.filter((item: any) => {
          return item.certificateType == 3;
        });
        titleCertTableData.value = res.data.certificates.filter((item: any) => {
          return item.certificateType == 4;
        });
        installedCertTableData.value = res.data.certificates.filter((item: any) => {
          return item.certificateType == 2;
        });
        otherCertTableData.value = res.data.certificates.filter((item: any) => {
          return item.certificateType == 6;
        });
      }
    } else {
    }
  } else {
  }
};
onMounted(initForm);
</script>

<style lang="scss" scoped>
:deep(.el-upload__tip) {
  display: inline-block;
  margin-left: 10px;
}
</style>
